<template>
  <table border="1" width="800">
    <thead>
    <tr>
      <th>课程编号</th>
      <th>课程名称</th>
      <th>所属年级</th>
      <th>学时</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="item in subjects">
      <td>{{item.subjectNo}}</td>
      <td>{{item.subjectName}}</td>
      <td>{{item.gradeID}}</td>
      <td>{{item.classHour}}</td>
      <td>
        <button @click="handleShowClick(item)">修改</button>
        <router-link :to="'/subjectupdate?id='+item.subjectNo">修改1</router-link>
        <router-link :to="{name:'subjectupdate',params:{id:item.subjectNo}}">修改2</router-link>
        <button @click="handleDeleteClick(item)">删除</button>
      </td>
    </tr>
    </tbody>
  </table>
  <div class="forms">
    <div>
      新增课程
      <p>课程名称
        <input v-model="subject.subjectName"/>
      </p>
      <p>
        年级
        <select v-model="subject.gradeID">
          <option
              v-for="item in grades"
              :value="item.gradeID"
              :key="item.gradeID">{{item.gradeName}}</option>
        </select>
      </p>
      <p>学时
        <input v-model="subject.classHour"/>
      </p>
      <p>
        <button @click="handleAddClick">保存</button>
      </p>
    </div>
    <div>
      修改课程
      <p>课程id
        <input v-model="subject2.subjectNo"/>
      </p>
      <p>课程名称
        <input v-model="subject2.subjectName"/>
      </p>
      <p>
        年级
        <select v-model="subject2.gradeID">
          <option
              v-for="item in grades"
              :value="item.gradeID"
              :key="item.gradeID">{{item.gradeName}}</option>
        </select>
      </p>
      <p>学时
        <input v-model="subject2.classHour"/>
      </p>
      <p>
        <button @click="handleUpdateClick">保存</button>
      </p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "SubjectListView",
  data(){
    return {
      subjects: [],
      grades:[],
      subject:{
        subjectName:'',
        gradeID:'',
        classHour:''
      },
      subject2:{
        subjectNo:'',
        subjectName:'',
        gradeID:'',
        classHour:''
      },
    }
  },
  methods:{
    loadsubjects(){
      axios.get('http://localhost:8080/subject/all')
          .then(res => {
            this.subjects = res.data.data
            console.log(this.subjects)
          })
    },
    loadgrades(){
      axios.get('http://localhost:8080/grade/all')
          .then(res => {
            this.grades = res.data.data
          })
    },
    handleAddClick(){
      axios.post('http://localhost:8080/subject/add',this.subject)
          .then(res => {
            if(res.data.success){
              alert('添加成功')
              this.loadsubjects()
              //重置数据
              this.subject = {
                subjectName:'',
                gradeID:'',
                classHour:''
              }
            }
          })
    },
    handleDeleteClick(item){
      let flag = confirm('确认要删除吗?课程名:'+item.subjectName)
      if(flag){
        axios.post('http://localhost:8080/subject/delete?subjectNo='+item.subjectNo)
            .then(res => {
              if(res.data.success){
                alert('删除成功')
                this.loadsubjects()
              }
            })
      }
    },
    handleShowClick(subject){
      this.subject2.subjectNo = subject.subjectNo
      this.subject2.subjectName = subject.subjectName
      this.subject2.classHour = subject.classHour
      this.subject2.gradeID = subject.gradeID
    },
    handleUpdateClick(){
      axios.post('http://localhost:8080/subject/update',this.subject2)
          .then(res => {
            if(res.data.success){
              alert('修改成功')
              this.loadsubjects()
              //重置数据
              this.subject2 = {
                subjectNo:'',
                subjectName:'',
                gradeID:'',
                classHour:''
              }
            }
          })
    }
  },
  created(){
    this.loadsubjects()
    this.loadgrades()
  }
}
</script>

<style scoped>
.forms{
  display: flex;
  justify-content: space-around;
}
</style>